<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>ColorPicker 颜色选择器</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.demo-color-sizes{
	display: inline-block;
	margin-right: 8px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型</p>
	<div class="demo-color-block">
		<span class="demonstration">有默认颜色</span>
		<el-color-picker v-model="color1" @change="handleChange"/>
	</div><br>
	<div class="demo-color-block">
		<span class="demonstration">无默认颜色</span>
		<el-color-picker v-model="color2" @change="handleChange"/>
	</div><br>
	
	<el-divider content-position="left">选择透明度</el-divider><!-- =============================================================== -->
	<p class="desc">ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色， 要启用 Alpha 选择，只需添加 show-alpha 属性</p>
	<div class="demo-color-block">
		<el-color-picker v-model="color3" show-alpha @change="handleChange"/>
	</div><br>
	
	<el-divider content-position="left">预定义颜色</el-divider><!-- =============================================================== -->
	<p class="desc">ColorPicker 支持预定义颜色</p>
	<div class="demo-color-block">
		<el-color-picker v-model="color4" show-alpha :predefine="predefineColors" @change="handleChange"/>
	</div><br>
	
	<el-divider content-position="left">不同尺寸</el-divider><!-- =============================================================== -->
	<p class="desc"></p>
	<div class="demo-color-sizes">
		<el-color-picker v-model="color1" size="large" />
	</div>
	<div class="demo-color-sizes">
		<el-color-picker v-model="color1"/>
	</div>
	<div class="demo-color-sizes">
		<el-color-picker v-model="color1" size="small" />
	</div>
	
</div>
</body>
<script>
const Main = {
	data() {
		return {
			msg: 'Hello Vue!!',
			color1: '#409EFF',
			color2: null,
			color3: 'rgba(19, 206, 102, 0.8)',
			
			color4: 'rgba(255, 69, 0, 0.68)',
			predefineColors: [
				'#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585',
				'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 
				'rgba(255, 69, 0, 0.68)', 'hsva(120, 40, 94, 0.5)', 
				'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', 
				'#c7158577',
			]
		}
	},
	methods:{
		handleChange(v){
			console.log(v)
			console.log(this.color4)
		},
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");

</script>
</html>